SUIPatternLibrary.TabView = (function($, _, app){
    
var $sidebar = $("<div id='sidebar'></div>"),
	$header = $("<div class='header'>active: <input type='button' id='button' value='???'/></div>");
    $patternContent = $("<div></div>"),
    $searchEnginesContent = $("<div></div>"),

    patternsLoaded = false,

    model = undefined,
    observable = {},

    init = function(_model){
        model = _model;
		$("#app").append($header);
        $("#app").append($sidebar);
        if(model.isReady()) {
            createPatternContent();
            patternsLoaded = true;
            render();
        }
        else{
            initEvents();
        }
    },

    initEvents = function(){
        model.on("patternsLoaded", function(){
            createPatternContent();
            patternsLoaded = true;
            render();
        });
    },

    createPatternContent = function(){
        $patternContent = createPatternList(app.Model.getPattern());
        var items = $patternContent.children();
        for(var i = 0, max = items.length; i < max; i++){
            var $item = $(items[i]);
            var patternName = $item.attr("pattern");
            addEngineLogos(patternName, $item);
        }
    },

    addEngineLogos = function(patternName, $item){
        var $logosContainer = $($item.children(".engine-logos")[0]);
        var pattern = app.Model.getPatternByName(patternName);
        var engines = pattern.engines;
        for(var i = 0, max = engines.length; i < max; i++){
            $logosContainer.append("<img class='engine-logo'" +
                " engine='" + engines[i].name +
                "' src='http://g.etfv.co/"   + engines[i].url +
                "'>");
        }
    },
   
    createPatternList = function(pattern){
        var $list = $("<ul class='pattern-list'></ul>")
        for(var i = 0, max = pattern.length; i < max; i++){
            $list.append(app.TemplateManager.compileTemplate("pattern-list-item", pattern[i]));
        }
        return $list;
    },

    highlightPattern = function(patternName){
        $("[pattern='" + patternName + "']").addClass("pattern-highlight");
    },

    unhighlightAll = function(){
        $(".pattern-list li").removeClass("pattern-highlight");
    },

    render = function(){
		
        if(!patternsLoaded) return;
        $sidebar.empty();

        var $el = app.TemplateManager.compileTemplate("tabview").tabs();

        $sidebar.append($el);

        $("#tabs-patterns").append($patternContent);

        addMouseEvents();
    },

    addListItemMouseEvents = function($item){
        $item.children(".pattern-name").hover(function(){
            $(observable).trigger("patternHover", $item.attr("pattern"));
        },
        function(){
            $(observable).trigger("patternHover", undefined);
        });
        $item.children(".pattern-name").click(function(){
            $(observable).trigger("patternClick", $item.attr("pattern"));
        });
        var engineLogos = $item.children(".engine-logos").children();
        for(var i = 0, max = engineLogos.length; i < max; i++){
            var $logo = $(engineLogos[i]);
            addEngineLogoClickEvent($logo, $logo.attr("engine"), $item.attr("pattern"));
        }
    },
	
	addButtonMouseEvents = function(){
		$("#button").click(function(){
			var val = $("#button").val();
			var active = (val != "ON");
			setActive(active);
		});
	},
	
	setActive = function(active){
		$(observable).trigger("activate", active);
		if(active){
			val = "ON";
		}else{
			val = "OFF";
		}
		$("#button").val(val);
	},

    addEngineLogoClickEvent = function($logo, engineName, patternName){
        $logo.click(function(){
            $(observable).trigger("engineSelected", engineName);
            $(observable).trigger("patternHover", patternName);
            selectEngine(engineName);
        });
        $logo.hover(function(){},
        function(){
            $(observable).trigger("patternHover", undefined);
        });
    },

    addMouseEvents = function(){
        var listItems = $(".pattern-list").children();
        for(var i = 0, max = listItems.length; i < max; i++){
            addListItemMouseEvents($(listItems[i]));
        }
		addButtonMouseEvents();
        $searchEnginesContent.bind('accordionchange', function(event, ui) {
            $(observable).trigger("engineSelected", getSelectedEngineName());
        });
    };
    
    return {
        highlightPattern : highlightPattern,
        unhighlitghtAll : unhighlightAll,
        init : init,
        on : function(event, callback){
            $(observable).on(event, callback);
        }
    }
    
}(jQuery, _, SUIPatternLibrary));